<template>
  <div class="register">
    <h1>请填写注册信息</h1>
    <!-- 输入任意文本 -->
    <van-field
      v-model="username"
      type="text"
      label-align="left"
      required
      label="用户名"
      placeholder="请输入用户名"
    />
    <!-- 输入手机号，调起手机号键盘 -->
    <van-field
      v-model="phone"
      type="tel"
      label-align="left"
      required
      label="手机号"
      placeholder="请输入手机号"
    />
    <van-field
      v-model="sms"
      left
      clearable
      label="短信验证码"
      placeholder="请输入短信验证码"
    >
      <template #button>
        <van-button size="small" type="primary">发送验证码</van-button>
      </template>
    </van-field>
    <!-- 输入密码 -->
    <van-field
      v-model="password"
      type="password"
      label-align="left"
      required
      label="密码"
      placeholder="请设置密码"
    />
    <!-- 选择所在城市 -->
    <div class="finish">
      <van-cell is-link @click="showPopupCity" title="城市" :value="city" />
      <van-popup
        v-model:show="showCity"
        position="bottom"
        :style="{ height: '50%' }"
      >
        <van-area
          :area-list="areaList"
          :columns-num="2"
          title="城市"
          value="areaName"
          @change="areaChange"
          @confirm="areaConfirm"
          @cancel="areaCancel"
        />
      </van-popup>
    </div>

    <van-button type="primary" to="/" size="large" text="完成" />
  </div>
</template>

<script>
// @ is an alias to /src
import { areaList } from "@vant/area-data";

export default {
  name: "Register",
  data: function () {
    return {
      username: "",
      phone: "",
      sms: "",
      password: "",
      city: "",
      areaName: "",
      showCity: false,
      areaList,
    };
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      let that = this;
      that.show = false;
      that.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },
    showPopupCity() {
      let that = this;
      that.showcity = true;
    },
    areaChange() {},
    areaConfirm(val) {
      let that = this;
      //values的值即为用户选中的省市对象，之后可向后端数据交互
      // console.log(values)
      that.areaName = val[0].name + "/" + val[1].name;
      that.city = that.areaName;
      that.showCity = false;
    },
    areaCancel() {
      let that = this;
      that.showCity = false;
      // this.list[3].msg='请选择'
    },
  },
  // components: {
  // },
};
</script>

<style scoped>
.register {
  position: absolute;
  top: 5rem;
  left: 2rem;
  right: 2rem;
}

.van-button--large {
  width: 80%;
  top: 20px;
}

.finish {
  text-align: left;
}
</style>
